Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here . Thanks so much!
This template is a responsive layout. All of the content area is nested within sections/divs. Here are the list of main section/divs:
Every file have many comments within HTML code explaining it’s role part by part. Additionally every part of the code is marked by comments. Here is the example:
<!--PORTFOLIO FILTER-->
<ul class="port-filter">
<li><a class="active" href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter=".design">Web Design</a></li>
<li><a href="#" data-filter=".development">Web Development</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
<li><a href="#" data-filter=".brand">Brand Identity</a></li>
</ul>
<!--PORTFOLIO FILTER END-->
This theme/template use some css for styling. Here are the list of the css and explanation:
Those files contain all of the specific stylings for the page.
This file is separated into sections using:
/* -- Header Section ---*/
some code
/*-----Header Section end---/
/* ----Main Section ---*/
some code
/*-----Main Section end----*/
/* ----Sidebar Section ---*/
some code
/* ---- Footer ---*/
some code
etc, etc.
This theme/template use some javascript/jquery plugin.
This theme imports three type of Javascript files.
//Script something start... //some explanation...
Each layout is seperated by different folder. And this is the list of html for each layout:
Open script.js and find this code:
//slider homepage setting
if ($('.home-slider').find('.slide').length > 1) {
$(".home-slider").owlCarousel({
navigation: false,
slideSpeed: 300,
autoplay: true,
autoHeight: true,
pagination: true,
paginationSpeed: 300,
singleItem: true,
transitionStyle: "fade"
});
}
You can set the speed of slider in index.html in this code
<div class="slider home-slider clearfix" data-auto-play="8000">
change 8000 with your own value (in ms)
Open blog.js and find this code:
//blog team setting
$(".blog-slider").owlCarousel({
navigation: true,
slideSpeed: 300,
autoplay: true,
autoHeight: true,
pagination: false,
paginationSpeed: 300,
singleItem: true,
mouseDrag: true,
navigationText: ['<span class="slide-nav inleft"><i class="fa fa-angle-left"></i></span >', '<span class="slide-nav inright"><i class="fa fa-angle-right"></i></span >'],
stopOnHover: false,
transitionStyle: "fade"
});
You can set the speed of slider in blog.html in this code
<div class="blog-slider" data-auto-play="5000">
change 5000 with your own value (in ms)
The video background is using bigvideo plugin. And you should host your own video for this or you have directlink for the video. You can open the index.html in video-background folder to set this video.
This is the code for that:
<!--video background script start-->
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript" src="js/bigvideo.js"></script>
<script>
//video background setting
var BV = new $.BigVideo({
container: $('#home')
});
BV.init();
if (Modernizr.touch) {
//replace the data-background into background image
$(".img-bg").each(function() {
var imG = $(this).data('background');
$(this).css('background-image', "url('" + imG + "') "
);
});
} else {
BV.show(
'dummyvideo.mp4' , //video source directlink
{ambient: true} //mute true
);
}
</script>
or further explanation about this, you can visit the plugin site here
Open index.html in youtube-background folder and find this code:
<!--YOUTUBE BACKGROUND-->
<div class="bg-youtube" data-property="{videoURL:'http://www.youtube.com/watch?v=l_HpnEMzvFM',
opacity:1, autoPlay:true, containment:'#home', startAt:0, stopAt:0, mute:true, optimizeDisplay:true,
showControls:false, printUrl:true, loop:true, addRaster:false, quality:'large', realfullscreen:'true', ratio:'auto'}"></div>
<!--YOUTUBE BACKGROUND END-->
You can change l_HpnEMzvFM with your own youtube ID
And you can check this page for further setting here
Portfolio section is inside section within id of "works". This portfolio is using ajax function to open the explanation content. You should connect the explanation html link inside the "data-link" inside the class of port-ajax (inside index.html).
Here the example code:
<a class="port-ajax" href="#" data-link="work1.html">
For setting the slider/video or even the jquery behavior in portfolio explanation you can open the portfolio.js in js folder.
This portfolio filter is using isotope plugins to filtered the portfolio items.
This is the filter navigation code:
<ul class="port-filter">
<li><a class="active" href="#" data-filter="*">All</a></li>
<li><a href="#" data-filter=".design">Web Design</a></li>
<li><a href="#" data-filter=".development">Web Development</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
</ul>
Base on those code, the filter is divided into some data-filter. Those data-filter will be the class of each portfolio.
This is the example code for portfolio with data-filter/class development
<div class="col-md-4 col-sm-6 port-item development design photography">
<a class="port-ajax bwWrapper" href="#" data-link="work1.html">
<div class="port-hov">
<div class="port-content">
<h3>The Savior</h3>
<i class="fa fa-suitcase"></i>
<p class="port-cat">Web Design</p>
</div><!--/.port-content-->
</div><!--/.port-hov-->
<img src="images/work/1.jpg" alt="team">
</a><!--/.port-ajax-->
</div><!--/.col-md-4-->
so when you press the "Web Development" filter the plugin will only show the portfolio with "development" class.
You can see the better explanation in the plugin site here
If you want to insert video or image hyperlink with lightbox dont forget to add class="popup-img"
inside the code.
This is example code:
<a class="popup-img" href="images/work/big1.jpg">
<img alt="works" src="images/work/1.jpg">
</a>
You can view this page for further explanation.
The responsive video is using fitvids plugin. This is the code inside script.js and portfolio.js
This is the script
// Video responsive
$("body").fitVids();
That code mean the responsive video is inside the "body"
for further setting you can check this page
ou can setting based on you location in script.js . Find this code:
//google map load
$('#map_canvas').gmap({
'center': '-6.94010,107.62575',
'zoom': 15,
scrollwheel: false,
'disableDefaultUI': false,
'styles': [{
stylers: [{
lightness: 7
}, {
saturation: -100
}]
}],
'callback': function() {
var self = this;
self.addMarker({
'position': this.get('map').getCenter(),
icon: 'images/office-building.png',
})
.click(function() {
self.openInfoWindow({
'content': $('.map-content').html()
}, this);
});
}
change "-6.94010,107.62575" with place in google map base on Latitude and Longitude. You can check you Latitude and Longitude in here
"'zoom': 15," is for your zoom setting. You can change the "15" with your own value.
Change this code if you want to change the marker picture:
icon: 'images/office-building.png',
You can set the marker content(when you click the marker) in index.html inside map-content class. You can use any html and styling for that. This is the code
<!--MAP MARKER CONTENT-->
<div class="hidden map-content">
<div class="box-map">
<img src="images/maps.jpg" alt="">
<h3>Our Office</h3>
<p><b>Address:</b> 11231 Buah Batu Bandung</p>
<p><b>Phone:</b> 987-654-321 </p>
<p><b>Email:</b> company-email@email.com</p>
</div>
</div>
<!--MAP MARKER CONTENT END-->
For api key, go to this link to get your api key for google map. You can read this page to create the api key.
After that, inser your api key in YOUR_API_KEY in index.html file and find this code:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=true"></script>
For further information you can check this page .
Make sure your host is support php files.
You can open contact.php in main folder ,contact.js in js folder for setting contact section.
There is comment in files for explanation.
This template is using the following images, icons or other files as listed.
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help, if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section and contact me via my profile here.